<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>会议室管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
    <style>
        .status-label {
            display: inline-block;
            font-size: 14px;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            color: #333;
            border: 1px solid #ddd;
            background-color: #f0f0f0;
        }

        .open {
            background-color: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }

        .close {
            background-color: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" method="POST" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">会议室名称</label>
                    <div class="layui-input-inline">
                        <input id="roomName" type="text" name="roomName" placeholder="请输入会议室名称"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">可容纳人数</label>
                    <div class="layui-input-inline" style="width: 100px">
                        <input id="capacity" type="text" name="capacity" placeholder="可容纳人数" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-md" sa:hasPermission="meetRoom_select" lay-submit
                            lay-filter="meetRoom-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="meetRoom-table" lay-filter="meetRoom-table"></table>
    </div>
</div>

<script type="text/html" id="meetRoom-toolbar">
    <button class="layui-btn  layui-btn-md" sa:hasPermission="meetRoom_add" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="layui-btn layui-bg-blue layui-btn-md" lay-event="refresh">
        <i class="layui-icon layui-icon-refresh-1"></i>
        刷新
    </button>
</script>

<script type="text/html" id="meetRoom-bar">
    <button class="layui-btn layui-btn-warming layui-btn-sm" sa:hasPermission="meetRoom_equipment" lay-event="book"><i
            class="layui-icon layui-icon-form"></i>
    </button>
    <button class="layui-btn layui-btn-sm" sa:hasPermission="meetRoom_update" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" sa:hasPermission="meetRoom_delete" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i>
    </button>
</script>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery', 'upload'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let cols = [
            [{checkbox: true},
                {title: '会议室名称', field: 'roomName', align: 'left',},
                {title: '描述', field: 'description', align: 'left',},
                {title: '容纳人数', field: 'capacity', align: 'left',},
                {title: '部门', field: 'departmentName', align: 'left'},
                {title: '联系人', field: 'contactName', align: 'left'},
                {title: '电话', field: 'contactPhone', align: 'left'},
                {
                    title: '图片', field: 'image', align: 'left', templet: function (d) {
                        return "<img style='width:50px;height:50px;' src='" + baseURL + d.image + "'/>"
                    }
                },
                {
                    title: '状态', field: 'status', align: 'center', templet: function (d) {
                        let statusClass = '';
                        let statusText = '';
                        if (d.status === 'open') {
                            statusClass = 'open';
                            statusText = '开放';
                        } else if (d.status === 'close') {
                            statusClass = 'close';
                            statusText = '关闭';
                        }
                        return '<span class="status-label ' + statusClass + '">' + statusText + '</span>';
                    }
                },
                {title: '操作', toolbar: '#meetRoom-bar', align: 'center', fixed: 'right', width: 200}
            ]
        ]
        $.ajax({
            url: baseURL + 'department/session/getDepartmentId', // 后端接口地址
            type: 'get',
            contentType: 'application/json',
            success: function (response) {
                window.departmentId = response.data
                table.render({
                    elem: '#meetRoom-table',
                    url: baseURL + 'meeting/meetRoom/list?departmentId=' + response.data,
                    request: {
                        pageName: 'pageNum',
                        limitName: 'pageSize',
                        departmentId: departmentId
                    },
                    type: 'get',
                    page: true,
                    curr: 1,
                    cols: cols,
                    skin: 'line',
                    toolbar: '#meetRoom-toolbar',
                    limits: [5, 10, 15, 20],
                    parseData: function (res) {// 对从后端获得的数据进行规范，最后返回四个键值对
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total,
                            "data": res.data.list, //解析数据列表
                        };
                    },
                    response: {
                        statusName: "code",
                        msgName: "msg",
                        statusCode: 1000,
                        dataName: "data"
                    },
                });

            }
        })
        table.on('tool(meetRoom-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event === 'book') {
                window.book(obj);
            }
        });

        table.on('toolbar(meetRoom-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        form.on('submit(meetRoom-query)', function (data) {
            table.reload('meetRoom-table', {
                page: {
                    curr: 1
                },
                where: {
                    roomName: data.field.roomName,
                    capacity: data.field.capacity
                }
            })
            return false;
        });
        document.getElementById('resetBtn').addEventListener('click', function () {
            // 重新加载表格，不带任何过滤条件
            table.reload('meetRoom-table', {
                where: {}, // 清除过滤条件
                page: {curr: 1} // 重新从第一页开始
            });
        });
        window.add = function () {
            layer.open({
                type: 2,
                title: '会议室新增',
                shade: 0.1,
                area: ['600px', '600px'],
                content: 'meetRoom-add'
            });
        }
        window.book = function (obj) {
            window.roomId = obj.data.roomId
            layer.open({
                type: 2,
                title: '会议室设备',
                shade: 0.1,
                shadeClose: true,
                area: ['100%', '100%'],
                content: '../equipment/equipment-list'
            });
        }

        window.edit = function (obj) {
            window.roomId = obj.data.roomId;
            window.image = obj.data.image;
            // 加载部门列表
            $.ajax({
                url: baseURL + 'department/list', // 后端接口地址
                type: 'GET',
                dataType: 'json',
                success: function (departData) {
                    layer.open({
                        type: 2,
                        title: '会议室编辑',
                        shade: 0.1,
                        shadeClose: true,
                        area: ['600px', '600px'],
                        content: 'meetRoom-edit',
                        success: function (layero, index) {
                            // 数据回显
                            let body = layer.getChildFrame('body', index);
                            let iframeWin = layero.find('iframe')[0].contentWindow;
                            // 填充下拉菜单选项
                            let select = body.find('#department-select');
                            select.empty().append('<option value="">请选择部门</option>');
                            $.each(departData.data, function (index, department) {
                                select.append('<option value="' + department.departmentId + '">' + department.departmentName + '</option>');
                            });
                            iframeWin.layui.form.render('select');
                            let data = obj.data
                            console.log(data)
                            body.find("input[name=roomName]").val(data.roomName)
                            let department = 'dd[lay-value=' + data.departmentId + ']';
                            body.find("#ID-upload-demo-img").attr('src', baseURL + data.image)
                            body.find("input[name=contactName]").val(data.contactName)
                            body.find("input[name=contactPhone]").val(data.contactPhone)
                            body.find("input[name=reservationMax]").val(data.reservationMax)
                            body.find('#department-select').siblings("div.layui-form-select").find('dl').find(department).click();
                            body.find("input[name=capacity]").val(data.capacity)
                            body.find("input[name=description]").val(data.description)
                            body.find("input[name=closeTime]").val(data.closeTime)
                            let open = body.find("input[name=status][value=open]");
                            let close = body.find("input[name=status][value=close]");
                            open.prop('checked', data.status == 'open' ? true : false);
                            close.prop('checked', data.status == 'close' ? true : false);
                            form.render(open)
                            form.render(close)
                        }
                    })
                }
            })
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该会议室吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: baseURL + 'meeting/meetRoom/delete/' + obj.data['roomId'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        table.reload('meetRoom-table', {where: {}, page: {curr: 1}});
                        if (result.code === 1000) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {

                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                });
            })
        }
        window.refresh = function () {
            table.reload('meetRoom-table', {where: {}, page: {curr: 1}});
        }
    })
</script>
</body>
</html>